// @import '@nutui/nutui-react-taro/dist/styles/theme-jmapp';

/* 默认的安全区域是0 */
:root {
  --safe-area-inset-top: 44px;
  --safe-area-inset-bottom: 34px;
  --safe-area-inset-left: 0px;
  --safe-area-inset-right: 0px;


  --nutui-brand-1: #F8FAFF; // 梯度1
  --nutui-brand-2: #F8FAFF; // 梯度2
  --nutui-brand-3: #F0F5FF; // 梯度3
  --nutui-brand-4: #D9E4FF; // 梯度4
  --nutui-brand-5: #B0C5FF; // 梯度5
  --nutui-brand-6: #87A3FF; // 梯度6
  --nutui-brand-7: #5E7EFF; // 梯度7
  --nutui-brand-8: #3556F7; // 梯度8 * 主题色 primary brand
  --nutui-brand-9: #2139D1; // 梯度9
  --nutui-brand-10: #1322AB; // 梯度10
  --nutui-brand-11: #05096E; // 梯度11
  --nutui-brand-12: #05096E; // 梯度12

  --nutui-brand-stop-1: var(--nutui-brand-8); // 渐变色起
  --nutui-brand-stop-2: var(--nutui-brand-8); // 渐变色止

  --nutui-color-primary: var(--nutui-brand-8);
  --nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
  --nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
  --nutui-color-primary-pressed: var(--nutui-brand-9);
  --nutui-color-primary-disabled: var(--nutui-brand-3);
  --nutui-color-primary-text: #ffffff;
  --nutui-color-primary-light: var(--nutui-brand-1);
  --nutui-color-primary-light-pressed: var(--nutui-brand-2);
  --nutui-color-text-link: var(--nutui-brand-8);

  --nutui-gray-0: #f4f4f4; // color-background
  // 卡片背景色
  --nutui-gray-1: #f7f7f7; // color-border-tint
  // 通用背景色、轮廓描边色
  --nutui-gray-2: #f0f0f0; // color-border-base
  // 轮廓描边色（适中）
  --nutui-gray-3: #ebebeb; // color-border-shade
  // 轮廓描边色（深）
  --nutui-gray-4: #e6e6e6;
  --nutui-gray-5: #d9d9d9;
  --nutui-gray-6: #cccccc;
  --nutui-gray-7: #b5b5b5;
  --nutui-gray-8: #8c8c8c;
  --nutui-gray-9: #666666;
  --nutui-gray-10: #595959;
  --nutui-gray-11: #333333;
  --nutui-gray-12: #262626;

  --nutui-black-1: #F8F9FD;
  --nutui-black-2: #F8F9FD;
  --nutui-black-3: #F3F6FC;
  --nutui-black-4: #EDF2FC;
  --nutui-black-5: #E8EDF7; // color-text-disabled
  // 四级文本色，禁用文本色，用于表达禁用状态，占位符等需弱化呈现的文本
  --nutui-black-6: #E3E8F2;
  --nutui-black-7: #CBD0D9; // color-text-description
  // 三级文本色，描述文本色，用于对正文级标题做注释说明
  --nutui-black-8: #B3B7BF; //
  // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩
  --nutui-black-9: #83868C; //  color-text-regular
  // 二级文本色，正文文本色，用于次级标题，属性标示、非主要信息引导等
  --nutui-black-10: #535559; //
  --nutui-black-11: #232426; //  color-text-title
  // 一级文字色，标题文本色，主要内容用色，常用语常规标题内容等
  --nutui-black-12: rgba(0, 0, 0, 1); //

  --nutui-white-1: rgba(255, 255, 255, 0.02);
  --nutui-white-2: rgba(255, 255, 255, 0.05);
  --nutui-white-3: rgba(255, 255, 255, 0.1);
  --nutui-white-4: rgba(255, 255, 255, 0.2);
  --nutui-white-5: rgba(255, 255, 255, 0.3);
  --nutui-white-6: rgba(255, 255, 255, 0.4);
  --nutui-white-7: rgba(255, 255, 255, 0.5);
  --nutui-white-8: rgba(255, 255, 255, 0.6);
  --nutui-white-9: rgba(255, 255, 255, 0.7);
  --nutui-white-10: rgba(255, 255, 255, 0.8);
  --nutui-white-11: rgba(255, 255, 255, 0.9);
  --nutui-white-12: rgba(255, 255, 255, 1);

  --nutui-green-1: #F6FFED;
  --nutui-green-2: #F6FFED;
  --nutui-green-3: #ECFFD8;
  --nutui-green-4: #D9F7BE;
  --nutui-green-5: #B7EB8F;
  --nutui-green-6: #95DE64; // * 成功色 success
  --nutui-green-7: #73D13D;
  --nutui-green-8: #52C41A;
  --nutui-green-9: #328A0D;
  --nutui-green-10: #135200;
  --nutui-green-11: #092B00;
  --nutui-green-12: #092B00;

  --nutui-orange-1: #FFF7E6;
  --nutui-orange-2: #FFF7E6;
  --nutui-orange-3: #FFEFD0;
  --nutui-orange-4: #FFE7BA;
  --nutui-orange-5: #FFD591;
  --nutui-orange-6: #FFC069; // * 警告色 warning
  --nutui-orange-7: #FFA940;
  --nutui-orange-8: #FA8C16;
  --nutui-orange-9: #C2630B;
  --nutui-orange-10: #873800;
  --nutui-orange-11: #612500;
  --nutui-orange-12: #612500;

  --nutui-red-1: #FFF1F0;
  --nutui-red-2: #FFF1F0;
  --nutui-red-3: #FFDFDC;
  --nutui-red-4: #FFCCC7;
  --nutui-red-5: #FFA39E;
  --nutui-red-6: #FF7875;
  --nutui-red-7: #FF4D4F;
  --nutui-red-8: #F5222D; // * 危险色 danger
  --nutui-red-9: #BC1120;
  --nutui-red-10: #820014;
  --nutui-red-11: #5C0011;
  --nutui-red-12: #5C0011;

  --nutui-info-1: #F8FAFF;
  --nutui-info-2: #F8FAFF;
  --nutui-info-3: #F0F5FF;
  --nutui-info-4: #D9E4FF;
  --nutui-info-5: #B0C5FF;
  --nutui-info-6: #87A3FF; // * 说明色 info
  --nutui-info-7: #5E7EFF;
  --nutui-info-8: #3556F7;
  --nutui-info-9: #2139D1;
  --nutui-info-10: #1322AB;
  --nutui-info-11: #05096E;
  --nutui-info-12: #05096E;

  --nutui-color-info: var(--nutui-info-6);
  --nutui-color-text-disabled: var(--nutui-black-6);
  // // 字体
  // --nutui-font-size-1: 10px; // font-text-mini
  // --nutui-font-size-2: 11px;
  // --nutui-font-size-3: 12px; // font-text-small
  // --nutui-font-size-4: 14px; // font-text、font-h3
  // --nutui-font-size-5: 16px; // font-text-large、font-h2
  // --nutui-font-size-6: 18px;
  // --nutui-font-size-7: 20px; // font-h1
  // --nutui-font-size-8: 24px; // 板块标题，指标数值、价格金额
  // --nutui-font-size-9: 32px; // 运营小标题
  // --nutui-font-size-10: 40px; // 运营大标题
  // // 字重
  // --nutui-font-weight: 400;
  // // 行高
  // --nutui-line-height-base: 1.5;

  // // space
  // --nutui-spacing-1: 2px; // spacing-xxs
  // --nutui-spacing-2: 4px; // spacing-xs
  // --nutui-spacing-3: 6px; // spacing-s
  // --nutui-spacing-4: 8px; // spacing-base
  // --nutui-spacing-5: 10px; // spacing-l
  // --nutui-spacing-6: 12px; // spacing-xl
  // --nutui-spacing-7: 14px; // spacing-xxl
  // --nutui-spacing-8: 16px; // spacing-xxxl
  // --nutui-spacing-9: 18px;
  // --nutui-spacing-10: 20px;

  // // radius
  // --nutui-radius-1: 2px; // radius-xxs
  // --nutui-radius-2: 4px; // radius-xs
  // --nutui-radius-3: 6px; // radius-s
  // --nutui-radius-4: 8px; // radius-base
  // --nutui-radius-5: 12px; // radius-l
  // --nutui-radius-6: 16px; // radius-xl

  // color: ;
  --primary-color: #1890ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;

  // 页面 基础 样式
  --bg-white: #ffffff;
  --bg-gray: #f6f6f6;

  --normal-padding: 1rem;
  --normal-margin: 1rem;
  --normal-padding: 1rem;
  --normal-margin: 1rem;

  // 字体
  --large-2-size: 1.4rem; // 大二号
  --large-1-size: 1.2rem; // 大一号
  --normal-size: 1rem; // 普通
  --small-1-size: .8rem; // 小一号
  --small-2-size: .6rem; // 小二号

  // 圆角
  --normal-square-btn-border-radius: .2rem; // 普通方形按钮圆角

}

body {
  // 设置了 viewport-fit=cover 后，height: 100% 不能撑满整个视口。
  min-height: 100vh;

  // padding-left: max(12px, env(safe-area-inset-left));
  // padding-right: max(12px, env(safe-area-inset-right));
  .taro-tabbar {
    &__tabbar {
      height: auto;

      .weui-tabbar {
        &__item {
          padding: 8px 0 4px 0;
        }

        &__icon {
          width: 48px;
          height: 48px;
        }

        &__label {
          font-size: 24px;
          line-height: 36px;
        }
      }
    }
  }



}

/* iPhoneX 等支持 constant 的适配 */
@supports (width: constant(safe-area-inset-top)) {
  :root {
    --origin-safe-area-inset-top: constant(safe-area-inset-top);
    --origin-safe-area-inset-bottom: constant(safe-area-inset-bottom);
  }
}

/* iPhoneX 等支持 evn 的适配 */
@supports (width: env(safe-area-inset-top)) {
  :root {
    --origin-safe-area-inset-top: env(safe-area-inset-top);
    --origin-safe-area-inset-bottom: env(safe-area-inset-bottom);
  }
}

/* 后续使用 */
#header {
  padding-top: constant(--origin-safe-area-inset-top);
  padding-top: var(--origin-safe-area-inset-top);
}

// 固定定位元素相关的细节 。fixed 完全吸底元素（ bottom = 0）
#footbar {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

// 消除默认滚动条
.taro_router>.taro_page {
  overflow-y: auto
}

.bg-white {
  background-color: var(--bg-white);
}

.bg-gray {
  background-color: var(--bg-gray);
}

// 滚动条样式重写
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent !important;
}

::-webkit-scrollbar-thumb {
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .45) !important;
  border-radius: 4px;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background-color: transparent !important;
}

::-webkit-scrollbar-track-piece {
  background-color: transparent !important;
}